<template>
	<view class="comment-item">
		<image class="avatar" :lazy-load="true" :src="comment.avatar" mode="widthFix"></image>
		<view class="info">
			<view class="author">{{comment.author}}</view>
			<view class="content">{{comment.content}}</view>
			<view class="reply_to" v-if="comment.reply_to">// {{comment.reply_to.author}}: {{comment.reply_to.content}}
			</view>
			<view class="extra">
				<view class="time">{{ comment.time | parseTime}}</view>
				<view class="icons">
					<text>{{comment.likes>0 ? comment.likes : ''}}赞</text>
					<text>回复</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CommentItem",
		props: ['comment'],
		data() {
			return {

			};
		},
		filters: {
			parseTime: function(t) {
				var d = new Date(t * 1000);
				console.log(d);
				return `${(d.getMonth() + 1).toString().padStart(2,0)}-${d.getDate().toString().padStart(2,0)} ${d.getHours().toString().padStart(2,0)}:${d.getMinutes().toString().padStart(2,0)}`;
				// return 123
			}
		}
	}
</script>

<style lang="less">
	.comment-item {
		display: flex;

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		.info {
			flex: 1;
			margin-left: 20rpx;
			font-size: 28rpx;
			text-align: justify;

			.author {
				font-weight: bold;
			}

			.content {
				font-size: 28rpx;
				color: black;
				margin: 10rpx 0;
			}

			.reply_to {
				color: gray;
				margin-bottom: 20rpx;
			}

			.extra {
				display: flex;
				justify-content: space-between;
				color: #B8B8B8;

				.time {
					
				}

				.icons {
					text {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
